<template>
  <div class="container">
    <div class="chart">
      <LakerEcharts ref="wchart" :option="option" width="100%" height="100%" @chartOnclick="chartOnclick" />
    </div>
  </div>
  <risk-top-10 ref="rtDialogRef" v-if="dialog.rtDialog" @closed="dialog.rtDialog = false"></risk-top-10>
</template>
<script>
import LakerEcharts from '@comp/lakerEcharts/index.vue'
import * as echarts from 'echarts'
import dprevent from '@/api/dprevent'
import RiskTop10 from './RiskTop10.vue'
export default {
  name: 'DpLeftItem1',
  components: {
    LakerEcharts,
    RiskTop10
  },
  data() {
    return {
      dialog: {
        raDialog: false,
        rtDialog: false
      },
      option: {
        grid: {
          top: '40',
          left: '40',
          right: '10',
          bottom: '30'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var ta0 = params[0]
            var tar = params[1]
            return ta0.name + '</br>' + ta0.seriesName + ' : ' + ta0.data + '</br>' + tar.seriesName + ' : ' + tar.data
          }
        },
        xAxis: {
          type: 'category',
          data: ['公司级', '部门级', '班组级']
        },
        yAxis: {
          type: 'value',
          name: '单位：个'
        },
        series: [
          {
            name: '本月',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top',
              color: '#ccc'
            },
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: [165, 187, 162]
          },
          {
            name: '今日',
            type: 'bar',
            barWidth: 20,
            label: {
              show: true,
              position: 'top',
              color: '#ccc'
            },
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ca8622' },
                { offset: 0.7, color: '#bda29a' },
                { offset: 1, color: '#749f83' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#749f83' },
                  { offset: 0.5, color: '#bda29a' },
                  { offset: 1, color: '#ca8622' }
                ])
              }
            },
            data: [65, 87, 62]
          }
        ]
      }
    }
  },
  mounted() {
    this.getApiData()
    setInterval(() => {
      this.getApiData()
    }, 5000)
  },
  methods: {
    getApiData() {
      dprevent.dpleftapi1().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            let data = res.result
            this.option.xAxis.data = data.map((item) => item.name)
            this.option.series[0].data = data.map((item) => item.mvalue)
            this.option.series[1].data = data.map((item) => item.dvalue)
          }
        }
      })
    },
    chartOnclick(params) {
      this.dialog.rtDialog = true
      this.$nextTick(() => {
        this.$refs.rtDialogRef.open('show').setData(params)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  justify-content: right;
  .chart {
    width: 100%;
    height: 100%;
  }
  .title {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    span {
      font-size: 16px;
      padding: 5px 10px;
    }
  }
}
</style>
